<template>
  <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
    <div class="login bg" style="width: 30%">
      <div style="font-size: 26px;font-weight: bold">医护人事档案管理系统  <span style="font-weight: normal;font-size: 20px">V1.0</span></div>
      <img src="../assets/22.png" style="width:400px;margin-top: 40px">
      <div style="font-size: 20px;font-weight: bold;margin-top: 20px">POWER BY <span style="font-weight: normal;font-size: 18px">&copy;</span> JIA</div>
    </div>
    <div class="login" style="width: 35%">
<!--      <div><img src="../assets/yuan.png" class="systemImg"></div>-->
        <el-form label-width="10%" :model="ruleForm" :rules="rules" ref="ruleForm" >
          <div style="font-size: 26px;font-weight: bold">登录
<!--            <span style="float: right;font-size: 14px;font-weight: normal;line-height: 50px">没有账号?-->
<!--              <span style="color: rgb(105,179,255);cursor: pointer">点击注册</span>-->
<!--            </span>-->
          </div>
          <el-form-item label="" style="width:100%;" prop="user"><el-input v-model="ruleForm.user"></el-input></el-form-item>
          <el-form-item label="" style="width:100%" prop="password"><el-input v-model="ruleForm.password" type="password"></el-input></el-form-item>
          <el-form-item  style="width:100%;margin-top:40px"><el-button type="primary" @click="submitForm('ruleForm')" :loading='loading'>登录</el-button></el-form-item>
          <el-form-item  style="width:100%;margin-top:10px"><el-button >注册</el-button></el-form-item>
        </el-form>
      </div>
    <img src="../assets/11.png" class="bgImg">
  </div>
</template>

<script>
import TaskManager from '../service/TaskManager'
export default {
  name: "login",
  data(){
    return{
      btnLoad:false,
      ruleForm:{
        password:"",
        user:""
      },
      loading:false,
      rules:{
        user:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password:[
          {required: true,message: '请输入密码', trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    toIndex(){

    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading=true;
            // console.log(this.$refs[formName].model)
            TaskManager.login(this.$refs[formName].model).then((res)=>{
              if(res.data.type=='success'){
                this.$message({
                  type:res.data.type,
                  message:res.data.message
                })
                window.localStorage.name=res.data.name;
                window.localStorage.dept=res.data.dept;
                window.localStorage.id=res.data.id;
                window.localStorage.role=res.data.role;
                if(res.data.role==1){
                  this.$router.push('/home')
                }else{
                  this.$router.push('/info')
                }

              }else{
                this.$message({
                  type:res.data.type,
                  message:res.data.message
                })
                this.loading=false;
              }
            })
            .catch(()=>{
              this.$message({
                type:"error",
                message:"服务器错误，请联系管理员"
              })
              this.loading=false;
            })
          }
        });
      }
  }
}
</script>

<style scoped>
.login{
  /*position: relative;*/
  width: 30%;
  height: 70%;
  background-color: white;
  border-radius: 4px;
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%,-50%);*/
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 20px 0.5px;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg{
  background-color: #3a8ee6;
  color: white;
}
.bgImg{
  width: 800px;
  position: absolute;
  opacity: 0.3;
  right: -160px;
  bottom:-160px;
  z-index: -10;
}
.systemImg{
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
  left: 50%;
  top: 0;
  transform: translate(-50%,-25%);
}
.el-form-item{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.el-form-item__label {
  text-align: justify;
}
/deep/ .el-form-item__content{
  margin-left: 0% !important;
}
.el-input{
  width: 500px;
}
.el-button{
  width: 500px;
}
</style>
